﻿@layout HomeLayout
@page "/"
@page "/docs/"
@inject ExampleService ExampleService
@inject NotificationService NotificationService
@inject DialogService DialogService

<PageTitle>@ExampleService.TitleFor(null)</PageTitle>
<HeadContent>
    <meta name="description" content="@ExampleService.DescriptionFor(null)">
</HeadContent>

<div class="demos-home light rz-px-6 rz-px-md-12">
  <RadzenStack Orientation="Orientation.Vertical" Gap="0px" class="rz-mx-auto">
    <RadzenRow>
      <RadzenColumn Size="12" class="rz-text-align-center">
        <RadzenText TextStyle="TextStyle.DisplayH6" TagName="TagName.H1" Style="max-width: 900px;" class="rz-mt-8 rz-mb-4 rz-mx-auto"><strong>100+</strong> native, open source Blazor components</RadzenText>
        <RadzenText TextStyle="TextStyle.DisplayH2" TagName="TagName.H2" Style="--rz-text-display-h2-font-size: clamp(3rem, 4.75vw, 4.75rem); max-width: 920px; font-weight: 500;" class="rz-mx-auto">The Most Sophisticated Free UI Component Library for Blazor</RadzenText>
        <RadzenText TextStyle="TextStyle.Body1" TextAlign="TextAlign.Center" Style="max-width: 640px; font-weight: 500; text-wrap: balance;" class="rz-mt-8 rz-mx-auto"><strong>Radzen Blazor Components</strong> give you everything you need to build responsive, data-driven web apps — for free.</RadzenText>
        <RadzenText TextStyle="TextStyle.Body1" TextAlign="TextAlign.Center" Style="max-width: 640px; font-weight: 500;" class="rz-mt-4 rz-mb-0 rz-mx-auto">The <strong>Subscription</strong> extends your toolkit with dedicated support, premium themes, reusable UI blocks, complete app templates, and a visual design-time experience.</RadzenText>
        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="1.5rem" Wrap="FlexWrap.Wrap" class="rz-py-8 rz-py-sm-10 rz-py-md-12 rz-mb-4">
          <NavLink class="rz-button rz-button-lg rz-variant-flat rz-primary rz-shade-default" href="/get-started">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Style="height: 100%;">
              <span>Get Started</span>
            </RadzenStack>
          </NavLink>
          <Anchor class="rz-button rz-button-lg rz-variant-outlined rz-secondary rz-shade-default" href="#subscription-benefits">See Subscription Benefits</Anchor>
        </RadzenStack>
      </RadzenColumn>
    </RadzenRow>

    <!-- Sample app -->
    <RadzenRow Gap="1rem" RowGap="1rem" class="rz-w-100 rz-mx-auto" Style="max-width: 1300px;">
      <RadzenColumn Size="12">
        <RadzenCard Variant="Variant.Text" class="rz-p-0 rz-overflow-hidden rz-shadow-8" Style="height: 80vh; max-height: 900px;">
          <RadzenLayout Style="position: relative;" class="rz-h-100">
            <RadzenHeader Style="min-width: 280px;">
              <RadzenRow AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Gap="0px">
                <RadzenColumn Size="8" SizeSM="5">
                  <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenSidebarToggle Click="@(() => demoSidebarExpanded = !demoSidebarExpanded)" />
                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">My Dashboard</RadzenText>
                  </RadzenStack>
                </RadzenColumn>
                <RadzenColumn Size="4" SizeSM="7">
                  <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End" Gap="1rem">
                    <RadzenButton Icon="notifications" ButtonStyle="ButtonStyle.Base" Variant="Variant.Text" Click="@ShowNotifications" class="rz-display-none rz-display-md-block" />
                    <RadzenButton Icon="help" ButtonStyle="ButtonStyle.Base" Variant="Variant.Text" Click="@ShowHelp" class="rz-display-none rz-display-md-block" />
                    <RadzenAppearanceToggle class="rz-display-none rz-display-md-block" />
                    <RadzenProfileMenu>
                      <Template>
                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-me-2">
                          <img src="" alt="User" style="width: 32px; height: 32px; border-radius: 50%;" />
                          <RadzenText TextStyle="TextStyle.Body2" class="rz-m-0 rz-display-none rz-display-md-block" Style="line-height: 1; color: inherit;">Alex Johnson</RadzenText>
                        </RadzenStack>
                      </Template>
                      <ChildContent>
                        <RadzenProfileMenuItem Text="My Profile" Icon="account_circle"></RadzenProfileMenuItem>
                        <RadzenProfileMenuItem Text="Account Settings" Icon="manage_accounts"></RadzenProfileMenuItem>
                        <RadzenProfileMenuItem Text="Notifications" Icon="notifications"></RadzenProfileMenuItem>
                        <RadzenProfileMenuItem Text="Change Password" Icon="password"></RadzenProfileMenuItem>
                        <RadzenProfileMenuItem Text="Sign Out" Icon="logout"></RadzenProfileMenuItem>
                      </ChildContent>
                    </RadzenProfileMenu>
                  </RadzenStack>
                </RadzenColumn>
              </RadzenRow>
            </RadzenHeader>
            <RadzenFabMenu Direction="Radzen.FabMenuDirection.Top">
              <RadzenFabMenuItem Text="Event" Icon="event" />
              <RadzenFabMenuItem Text="Meeting" Icon="people_alt" />
              <RadzenFabMenuItem Text="Task" Icon="task" />
            </RadzenFabMenu>
            <RadzenBody @ref="demoBody" Style="min-height: 300px;">
              <RadzenStack Gap="1rem" class="rz-p-0 rz-pt-4 rz-px-md-3">
                <RadzenRow JustifyContent="JustifyContent.SpaceBetween" AlignItems="AlignItems.Center">
                  <RadzenColumn Size="9">
                    <RadzenStack Gap="0.125rem">
                      <RadzenText TextStyle="TextStyle.DisplayH6" TagName="TagName.H1">Good Morning, Alex</RadzenText>
                      <RadzenText TextStyle="TextStyle.Body2" class="rz-color-text-secondary">Here's your task overview for today.</RadzenText>
                    </RadzenStack>
                  </RadzenColumn>
                  <RadzenColumn Size="3">
                    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="1rem">
                      <RadzenButton Icon="refresh" Variant="Variant.Outlined" title="Refresh" />
                    </RadzenStack>
                  </RadzenColumn>
                </RadzenRow>
                <RadzenRow>
                  <RadzenColumn Size="12" SizeMD="3">
                    <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                      <RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
                        <RadzenText TextStyle="TextStyle.Overline">Overdue</RadzenText>
                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
                          <RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9; color: var(--rz-series-3)">@overdueTasks</RadzenText>
                          <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-series-3)">need attention</RadzenText>
                          </RadzenStack>
                        </RadzenStack>
                      </RadzenStack>
                    </RadzenCard>
                  </RadzenColumn>
                  <RadzenColumn Size="12" SizeMD="3">
                    <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                      <RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
                        <RadzenText TextStyle="TextStyle.Overline">Completed Today</RadzenText>
                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
                          <RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9; color: var(--rz-series-1">@tasksCompletedToday</RadzenText>
                          <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                            <RadzenIcon Icon="trending_up" Style="color: var(--rz-series-1)" />
                            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-series-1)">+3 from yesterday</RadzenText>
                          </RadzenStack>
                        </RadzenStack>
                      </RadzenStack>
                    </RadzenCard>
                  </RadzenColumn>
                  <RadzenColumn Size="12" SizeMD="3">
                    <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                      <RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
                        <RadzenText TextStyle="TextStyle.Overline">In Progress</RadzenText>
                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
                          <RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9; color: var(--rz-series-2)">@tasksInProgress</RadzenText>
                          <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-series-2)">active tasks</RadzenText>
                          </RadzenStack>
                        </RadzenStack>
                      </RadzenStack>
                    </RadzenCard>
                  </RadzenColumn>
                  <RadzenColumn Size="12" SizeMD="3">
                    <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                      <RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
                        <RadzenText TextStyle="TextStyle.Overline">Upcoming Deadlines</RadzenText>
                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
                          <RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9;">@upcomingDeadlines</RadzenText>
                          <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                            <RadzenText TextStyle="TextStyle.Body2">next 7 days</RadzenText>
                          </RadzenStack>
                        </RadzenStack>
                      </RadzenStack>
                    </RadzenCard>
                  </RadzenColumn>
                </RadzenRow>
                <RadzenRow>
                  <RadzenColumn Size="12">
                    <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                      <RadzenStack Gap="1rem">
                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween"> 
                          <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H2">Monthly Performance Overview</RadzenText>
                          <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap">
                            <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
                            <RadzenLabel Text="Show labels" Component="dataLabels" />
                          </RadzenStack>
                        </RadzenStack>
                        <RadzenChart>
                          <RadzenStackedColumnSeries Data="@completedTasksData" CategoryProperty="Month" Title="Completed" ValueProperty="Count">
                            <RadzenSeriesDataLabels Visible="@showDataLabels" />
                          </RadzenStackedColumnSeries>
                          <RadzenStackedColumnSeries Data="@inProgressTasksData" CategoryProperty="Month" Title="In Progress" ValueProperty="Count">
                            <RadzenSeriesDataLabels Visible="@showDataLabels" />
                          </RadzenStackedColumnSeries>
                          <RadzenStackedColumnSeries Data="@overdueTasksData" CategoryProperty="Month" Title="Overdue" ValueProperty="Count">
                            <RadzenSeriesDataLabels Visible="@showDataLabels" />
                          </RadzenStackedColumnSeries>
                          <RadzenColumnOptions Radius="4" Margin="5" />
                          <RadzenCategoryAxis Padding="0" LabelAutoRotation="-60" />
                          <RadzenValueAxis Min="0" Step="10">
                            <RadzenGridLines Visible="true" />
                            <RadzenAxisTitle Text="Number of Tasks" />
                          </RadzenValueAxis>
                          <RadzenLegend Position="LegendPosition.Bottom" />
                        </RadzenChart>
                      </RadzenStack>
                    </RadzenCard>
                  </RadzenColumn>
                </RadzenRow>
                <RadzenRow>
                  <RadzenColumn Size="12">
                    <RadzenCard Variant="Variant.Outlined" class="rz-h-100 rz-p-0 rz-overflow-hidden">
                      <RadzenStack Gap="0">
                        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H2" Style="padding: var(--rz-card-padding);">Upcoming Deadlines</RadzenText>
                        <RadzenDataGrid Data="@upcomingDeadlinesData" AllowPaging="true" PageSize="6" AllowSorting="true" AllowGrouping="true" AllowColumnResize="true" Style="border-inline: none; border-block-end: none; border-radius: 0;">
                          <Columns>
                            <RadzenDataGridColumn TItem="TaskItem" Property="Id" Title="ID" Width="80px" />
                            <RadzenDataGridColumn TItem="TaskItem" Property="Priority" Title="Priority" Width="100px">
                              <Template Context="task">
                                <RadzenBadge Text="@GetPriorityText(task.Priority)" BadgeStyle="BadgeStyle.Base" Shade="@GetPriorityStyle(task.Priority)" />
                              </Template>
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TaskItem" Property="Status" Title="Status" Width="100px">
                              <Template Context="task">
                                <RadzenBadge Text="@task.Status" BadgeStyle="@GetStatusStyle(task.Status)" />
                              </Template>
                            </RadzenDataGridColumn>
                              <RadzenDataGridColumn TItem="TaskItem" Property="Name" Title="Task"  Width="200px" />
                              <RadzenDataGridColumn TItem="TaskItem" Property="Description" Title="Description" />
                            <RadzenDataGridColumn TItem="TaskItem" Property="DueDate" Title="Due Date"  Width="150px">
                              <Template Context="task">
                                <RadzenText>@task.DueDate.ToString("MMM dd, yyyy")</RadzenText>
                              </Template>
                            </RadzenDataGridColumn>
                          </Columns>
                        </RadzenDataGrid>
                      </RadzenStack>
                    </RadzenCard>
                  </RadzenColumn>
                </RadzenRow>
              </RadzenStack>
            </RadzenBody>
            <RadzenSidebar @ref="demoSidebar" FullHeight="true" Responsive="false" Position="SidebarPosition.Start" @bind-Expanded="@demoSidebarExpanded" Style="--rz-sidebar-width: 250px;">
              <RadzenStack Gap="0" Style="height: 100%;" JustifyContent="JustifyContent.SpaceBetween">
                <RadzenText TextStyle="TextStyle.DisplayH6" TagName="TagName.H2" class="rz-mt-6 rz-ms-6 rz-mb-4">Radzen Tasks</RadzenText>
                <RadzenPanelMenu @ref="demoPanelMenu" Style="flex: 1;">
                  <RadzenPanelMenuItem Text="Dashboard" Icon="dashboard" Click="@(() => OnMenuItemClick("Dashboard"))" />
                  <RadzenPanelMenuItem Text="My Tasks" Icon="assignment" Click="@(() => OnMenuItemClick("My Tasks"))" />
                  <RadzenPanelMenuItem Text="Projects" Icon="folder" Click="@(() => OnMenuItemClick("Projects"))" />
                  <RadzenPanelMenuItem Text="Calendar" Icon="event" Click="@(() => OnMenuItemClick("Calendar"))" />
                  <RadzenPanelMenuItem Text="Reports" Icon="assessment" Click="@(() => OnMenuItemClick("Reports"))" />
                  <RadzenPanelMenuItem Text="Settings" Icon="settings" Click="@(() => OnMenuItemClick("Settings"))" />
                </RadzenPanelMenu>
                <RadzenText TextStyle="TextStyle.Caption" class="rz-ms-6 rz-text-tertiary-color">Radzen Tasks v1.0.0</RadzenText>
                <RadzenText TextStyle="TextStyle.Caption" class="rz-mb-6 rz-ms-6 rz-text-tertiary-color">Copyright Ⓒ 2025</RadzenText>
              </RadzenStack>
            </RadzenSidebar>
          </RadzenLayout>
        </RadzenCard>
      </RadzenColumn>
    </RadzenRow>
    <!-- End Sample app -->

    <RadzenRow Gap="1rem" RowGap="1rem" class="rz-w-100 rz-mx-auto" Style="max-width: 1100px;">
      <RadzenColumn>
        <RadzenStack AlignItems="Radzen.AlignItems.Center">
          <RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.H3" TextAlign="TextAlign.Center" Style="max-width: 900px; font-weight: 500;" class="rz-mt-8 rz-pt-4 rz-pt-sm-12 rz-mb-6 rz-mx-auto">Trusted by thousands of developers and IT leaders</RadzenText>
          <RadzenRow class="rz-w-100 rz-mx-auto">
            <RadzenColumn Size="12">
              <RadzenCard Variant="Variant.Text" class="customers-logos rz-h-100 rz-background-color-white" >
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Wrap="FlexWrap.Wrap" Gap="0" class="rz-mx-auto" Style="max-width: 1000px;">
                  <span><img alt="Microsoft" src="images/microsoft.svg" /></span>
                  <span class="square"><img alt="Porsche" src="images/porsche.svg" /></span>
                  <span class="square"><img alt="NASA" src="images/nasa.svg" /></span>
                  <span><img alt="Allianz" src="images/allianz.svg" /></span>
                  <span class="square"><img alt="Dell" src="images/dell.svg" /></span>
                  <span class="square"><img alt="Shell" src="images/shell.svg" /></span>
                  <span><img alt="Siemens" src="images/siemens.svg" /></span>
                  <span><img alt="DHL" src="images/DHL.svg" /></span>
                  <span><img alt="Nokia" src="images/nokia.svg" /></span>
                  <span><img alt="Eurobank" src="images/eurobank.svg" style="height: 36px;"/></span>
                  <span class="square"><img alt="Konica Minolta" src="images/konica-minolta.svg"/></span>
                  <span><img alt="Accenture" src="images/accenture.svg" /></span>
                  <span><img alt="Deloitte" src="images/deloitte.svg" /></span>
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
          </RadzenRow>
        </RadzenStack>
      </RadzenColumn>
    </RadzenRow>
    <RadzenRow Gap="1rem" RowGap="1rem" class="rz-w-100 rz-mx-auto" Style="max-width: 1100px;">
      <RadzenColumn>
        <RadzenStack AlignItems="Radzen.AlignItems.Center">
          <RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.H3" TextAlign="TextAlign.Center" Style="max-width: 900px; font-weight: 500;" class="rz-mt-6 rz-pt-4 rz-pt-sm-12 rz-mb-6 rz-mx-auto">Reliable, Productive, and Professional</RadzenText>
          <RadzenRow class="rz-w-100 rz-mx-auto">
            <RadzenColumn Size="12" SizeXS="4">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="speed" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Native components" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Implemented in C#/Razor with no wrappers around external JavaScript libraries or frameworks." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="extension" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Open and flexible" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Open source under the MIT license and easy to extend. No vendor lock-in." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="devices_other" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Responsive layouts" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600"  />
                  <RadzenText Text="Adjusts automatically to any screen size or device." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="accessibility_new" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Accessibility" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Includes ARIA support and full keyboard navigation." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="sync_alt" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="RTL" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Supports right-to-left layouts for multilingual apps." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="verified" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Consistent quality" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Actively maintained and tested by the Radzen team." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
          </RadzenRow>
        </RadzenStack>
      </RadzenColumn>
    </RadzenRow>

    <RadzenRow ID="subscription-benefits" Gap="1rem" RowGap="1rem" class="rz-w-100 rz-mx-auto" Style="max-width: 1100px;">
      <RadzenColumn Size="12">
        <RadzenStack AlignItems="Radzen.AlignItems.Center">
          <RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.H3" TextAlign="TextAlign.Center" Style="max-width: 900px; font-weight: 500;" class="rz-mt-6 rz-pt-4 rz-pt-sm-12 rz-mb-6 rz-mx-auto">Subscribe and Get</RadzenText>
          <RadzenRow class="rz-w-100 rz-mx-auto">
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="palette" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Premium Themes & Swatches" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Ensure a consistent, polished look that matches your brand and supports accessibility." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="brush" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Theme Editor" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Customize colors, typography, and component properties visually. No manual CSS required." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="widgets" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Reusable UI Blocks" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600"  />
                  <RadzenText Text="Assemble pages quickly from ready-made layouts, forms, and dashboards." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="dashboard_customize" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Complete App Templates" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Start faster with project templates that cover common business scenarios." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="format_shapes" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Visual Design-Time Experience" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Design pages visually in your Visual Studio or the standalone Radzen Blazor Studio IDE." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="assistant" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Page & Layout Wizards" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Use guided wizards to build new pages and layouts quickly and consistently." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="dns" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="CRUD" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Generate create, read, update, and delete pages from your data sources in minutes." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="filter_alt" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Query Builder" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Sort and Filter your data when you bind it to components." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="schema" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Visual Method Editor" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Define and edit custom logic visually with a clean, intuitive interface." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="bug_report" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Debugging" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Run, test, and debug your applications without leaving the environment." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="support" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Dedicated Support" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Get direct help from the Radzen team. Expert guidance when you need it most." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeXS="4" SizeSM="3">
              <RadzenCard Variant="Variant.Outlined" class="rz-h-100">
                <RadzenStack Gap="0.5rem">
                  <RadzenIcon Icon="auto_fix_high" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
                  <RadzenText Text="Priority Fixes & Feature Requests" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
                  <RadzenText Text="Subscribers receive priority handling for bug fixes and new feature requests." TextStyle="Radzen.Blazor.TextStyle.Body2" />
                </RadzenStack>
              </RadzenCard>
            </RadzenColumn>
          </RadzenRow>
          <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="1.5rem" Wrap="FlexWrap.Wrap" class="rz-py-8 rz-py-sm-10 rz-py-md-12">
            <NavLink class="rz-button rz-button-lg rz-variant-flat rz-primary rz-shade-default" href="https://www.radzen.com/blazor-studio/download" target="_blank" title="Explore Radzen Blazor Studio features">Start Free</NavLink>
            <NavLink class="rz-button rz-button-lg rz-variant-outlined rz-secondary rz-shade-default" href="https://www.radzen.com/pricing" target="_blank" title="Radzen Pricing">See Subscription Plans</NavLink>
          </RadzenStack>
          <RadzenCarousel ButtonShade="Radzen.Shade.Dark" AllowNavigation="false" Interval="6000" class="rz-w-100 rz-mx-auto rz-pb-8" >
            <Items>
              <RadzenCarouselItem>
                <RadzenRow RowGap="3rem" Gap="1rem">
                  <RadzenColumn Size="12">
                    <RadzenStack Style="max-width: 800px" Gap="3.5rem" class="rz-mx-auto">
                      <RadzenStack Style="margin-top: 40px" Gap="1rem">
                        <RadzenText Text="&ldquo;" TextStyle="Radzen.Blazor.TextStyle.DisplayH1" TagName="Radzen.Blazor.TagName.P" Style="line-height: 8px; font-weight: 700; font-family: Georgia, serif" class="rz-m-0" />
                        <RadzenText Text="" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 500; line-height: 1.2em" class="">
                          <span>Radzen is a top quality RAD product!</span>
                          <span Style="font-weight: 300" class="rz-m-0 rz-text-tertiary-color">Apart from the excellent customer support (particularly their thorough understanding of our problems), the time saving element of Radzen truly impressed us.</span>
                        </RadzenText>
                        <RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
                          <RadzenStack Gap="0">
                            <RadzenText Text="Miguel Reis" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-secondary-color" />
                            <RadzenText Text="R & D Project Manager at SIER Group" class="rz-m-0 rz-text-tertiary-color" />
                          </RadzenStack>
                        </RadzenStack>
                      </RadzenStack>
                    </RadzenStack>
                  </RadzenColumn>
                </RadzenRow>
              </RadzenCarouselItem>
              <RadzenCarouselItem>
                <RadzenRow RowGap="3rem" Gap="1rem">
                  <RadzenColumn Size="12">
                    <RadzenStack Style="max-width: 800px" Gap="3.5rem" class="rz-mx-auto">
                      <RadzenStack Style="margin-top: 60px" Gap="1rem">
                        <RadzenText Text="&ldquo;" TextStyle="Radzen.Blazor.TextStyle.DisplayH1" TagName="Radzen.Blazor.TagName.P" Style="line-height: 8px; font-weight: 700; font-family: Georgia, serif" class="rz-m-0" />
                        <RadzenText Text="" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 500; line-height: 1.2em" class="">
                          <span>Why Radzen?</span>
                          <span Style="font-weight: 300" class="rz-m-0 rz-text-tertiary-color">Speed of development, proven technologies and spectacular support and commitment from the Radzen team.</span>
                        </RadzenText>
                        <RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
                          <RadzenStack Gap="0">
                            <RadzenText Text="Carlos Carminati" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-secondary-color" />
                            <RadzenText Text="Solution Architect at Mine IT" class="rz-m-0 rz-text-tertiary-color" />
                          </RadzenStack>
                        </RadzenStack>
                      </RadzenStack>
                    </RadzenStack>
                  </RadzenColumn>
                </RadzenRow>
              </RadzenCarouselItem>
              <RadzenCarouselItem>
                <RadzenRow RowGap="3rem" Gap="1rem">
                  <RadzenColumn Size="12">
                    <RadzenStack Style="max-width: 800px" Gap="3.5rem" class="rz-mx-auto">
                      <RadzenStack Style="margin-top: 60px" Gap="1rem">
                        <RadzenText Text="&ldquo;" TextStyle="Radzen.Blazor.TextStyle.DisplayH1" TagName="Radzen.Blazor.TagName.P" Style="line-height: 8px; font-weight: 700; font-family: Georgia, serif" class="rz-m-0" />
                        <RadzenText Text="" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 500; line-height: 1.2em" class="">
                          <span>The time and money we invested before we switched to Radzen was significantly higher.</span>
                          <span Style="font-weight: 300" class="rz-m-0 rz-text-tertiary-color">Managing our always-evolving data structures is now much easier and reliable.</span>
                        </RadzenText>
                        <RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
                          <RadzenStack Gap="0">
                            <RadzenText Text="Maximilian Rogl" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-secondary-color" />
                            <RadzenText Text="Chief Product Owner at adventics GmbH" class="rz-m-0 rz-text-tertiary-color" />
                          </RadzenStack>
                        </RadzenStack>
                      </RadzenStack>
                    </RadzenStack>
                  </RadzenColumn>
                </RadzenRow>
              </RadzenCarouselItem>
            </Items>
          </RadzenCarousel>
        </RadzenStack>
      </RadzenColumn>
    </RadzenRow>
  </RadzenStack>
</div>
<div class="demos-home dark rz-px-6 rz-px-md-12">
  <RadzenStack Orientation="Orientation.Vertical" Gap="0px" class="rz-mx-auto rz-text-align-center" Style="max-width: 1280px;">
    <RadzenText TextStyle="TextStyle.DisplayH2" TagName="TagName.H2" Style="--rz-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); max-width: 900px;" class="rz-mx-auto">Accelerated, smarter, and cost-effective Blazor development</RadzenText>
    <RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.H3" class="rz-mt-12 rz-mb-6">The Subscription extends your toolkit with dedicated support, premium themes, reusable UI blocks, complete app templates, and a visual design-time experience.</RadzenText>
    <RadzenText TextStyle="TextStyle.Body1">Test the premium features for 15 days.</RadzenText>
    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="1.5rem" Wrap="FlexWrap.Wrap" class="rz-mt-12">
      <NavLink class="rz-button rz-button-lg rz-variant-flat rz-primary rz-shade-default" href="https://www.radzen.com/blazor-studio/download" target="_blank" title="Get Radzen Blazor Studio for Windows, Mac or Linux">Start Free</NavLink>
      <NavLink class="rz-button rz-button-lg rz-variant-outlined rz-light rz-shade-default" href="https://www.radzen.com/blazor-studio" target="_blank" title="Explore Radzen Blazor Studio features">Learn More</NavLink>
    </RadzenStack>
    <RadzenStack Orientation="Orientation.Vertical" JustifyContent="JustifyContent.Center" class="copyright">
      <RadzenLink Path="https://www.radzen.com" title="Create .NET Core web applications fast & easy" target="_blank"><img alt="Easier than you think" src="images/easier-than-you-think.svg" /></RadzenLink>
      <p class="rz-mt-12">
        Radzen Blazor Components, &copy; 2018-2025 Radzen.<br />
        <RadzenLink Path="https://github.com/radzenhq/radzen-blazor" Text="Source Code" target="_blank" /> licensed under
        <RadzenLink Path="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE" Text="MIT" target="_blank" />.
      </p>
      <Social />
    </RadzenStack>
  </RadzenStack>
</div>

@code {
  async Task ShowVideoDialog(string url)
    {
      await DialogService.OpenAsync("Create new Blazor app", ds =>
      @<div class="embed-container">
        <iframe src="@url" frameborder="0" allowfullscreen=""></iframe>
      </div>, new DialogOptions() {
          Width = "50%",
          Resizable = true
        });
    }

// Data Models
  public class TaskActivity
  {
    public string Type { get; set; }
    public string Description { get; set; }
    public DateTime Timestamp { get; set; }
  }

  public class TaskOverTimeData
  {
    public string Date { get; set; }
    public int Completed { get; set; }
  }

  public class TaskItem
  {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public DateTime DueDate { get; set; }
    public string Priority { get; set; }
    public string Status { get; set; }
  }

  public class TaskCountData
  {
    public string Month { get; set; }
    public int Count { get; set; }
  }

  // Properties
  private RadzenSidebar demoSidebar;
  private RadzenBody demoBody;
  private RadzenPanelMenu demoPanelMenu;
  private bool demoSidebarExpanded = false;

  // Task Metrics
  private int tasksCompletedToday = 8;
  private int tasksInProgress = 12;
  private int upcomingDeadlines = 5;
  private int overdueTasks = 2;

  // Data Collections
  private List<TaskOverTimeData> tasksOverTimeData = new();
  private List<TaskItem> upcomingDeadlinesData = new();
  private List<TaskCountData> completedTasksData = new();
  private List<TaskCountData> inProgressTasksData = new();
  private List<TaskCountData> overdueTasksData = new();
  private List<string> priorityOptions = new() { "High", "Medium", "Low" };
  private List<string> categoryOptions = new() { "Work", "Personal", "Learning", "Health" };
  private bool showDataLabels = false;

  protected override void OnInitialized()
  {
    InitializeSampleData();
  }

  private void InitializeSampleData()
  {
    // Initialize tasks over time data
    tasksOverTimeData = new List<TaskOverTimeData>
    {
      new TaskOverTimeData { Date = "Mon", Completed = 5 },
      new TaskOverTimeData { Date = "Tue", Completed = 7 },
      new TaskOverTimeData { Date = "Wed", Completed = 6 },
      new TaskOverTimeData { Date = "Thu", Completed = 8 },
      new TaskOverTimeData { Date = "Fri", Completed = 9 },
      new TaskOverTimeData { Date = "Sat", Completed = 4 },
      new TaskOverTimeData { Date = "Sun", Completed = 3 }
    };

    // Initialize upcoming deadlines data
    upcomingDeadlinesData = new List<TaskItem>
    {
      new TaskItem { Id = 1001, Name = "Finish report", Description = "Complete the quarterly sales report with all metrics and analysis", DueDate = DateTime.Now.AddDays(1), Priority = "High", Status = "In Progress" },
      new TaskItem { Id = 1002, Name = "Buy groceries", Description = "Weekly grocery shopping for household essentials", DueDate = DateTime.Now.AddDays(1), Priority = "Low", Status = "Pending" },
      new TaskItem { Id = 1003, Name = "Prepare presentation", Description = "Create slides for the client meeting on new product features", DueDate = DateTime.Now.AddDays(2), Priority = "High", Status = "In Progress" },
      new TaskItem { Id = 1004, Name = "Review budget", Description = "Analyze department budget and prepare recommendations", DueDate = DateTime.Now.AddDays(3), Priority = "Medium", Status = "Pending" },
      new TaskItem { Id = 1005, Name = "Team meeting", Description = "Weekly team standup to discuss project progress and blockers", DueDate = DateTime.Now.AddDays(4), Priority = "Medium", Status = "Scheduled" },
      new TaskItem { Id = 1006, Name = "Update documentation", Description = "Update API documentation with latest changes and examples", DueDate = DateTime.Now.AddDays(5), Priority = "Low", Status = "Pending" },
      new TaskItem { Id = 1007, Name = "Client call", Description = "Follow-up call with potential client to discuss requirements", DueDate = DateTime.Now.AddDays(6), Priority = "High", Status = "Scheduled" },
      new TaskItem { Id = 1008, Name = "Code review", Description = "Review pull requests from development team members", DueDate = DateTime.Now.AddDays(7), Priority = "Medium", Status = "In Progress" },
      new TaskItem { Id = 1009, Name = "Submit proposal", Description = "Submit project proposal for the new marketing campaign", DueDate = DateTime.Now.AddDays(8), Priority = "High", Status = "Pending" },
      new TaskItem { Id = 1010, Name = "Gym workout", Description = "Regular fitness session at the local gym", DueDate = DateTime.Now.AddDays(9), Priority = "Low", Status = "Scheduled" },
      new TaskItem { Id = 1011, Name = "Database backup", Description = "Perform scheduled backup of production database", DueDate = DateTime.Now.AddDays(10), Priority = "Medium", Status = "Pending" },
      new TaskItem { Id = 1012, Name = "Project planning", Description = "Plan next sprint and assign tasks to team members", DueDate = DateTime.Now.AddDays(11), Priority = "High", Status = "In Progress" },
      new TaskItem { Id = 1013, Name = "Email follow-up", Description = "Follow up on pending emails and respond to inquiries", DueDate = DateTime.Now.AddDays(12), Priority = "Low", Status = "Pending" },
      new TaskItem { Id = 1014, Name = "System testing", Description = "Perform comprehensive testing of the new feature release", DueDate = DateTime.Now.AddDays(13), Priority = "Medium", Status = "Scheduled" },
      new TaskItem { Id = 1015, Name = "Quarterly review", Description = "Conduct quarterly performance review with team members", DueDate = DateTime.Now.AddDays(14), Priority = "High", Status = "Pending" },
      new TaskItem { Id = 1016, Name = "Website update", Description = "Update company website with latest news and announcements", DueDate = DateTime.Now.AddDays(15), Priority = "Medium", Status = "In Progress" },
      new TaskItem { Id = 1017, Name = "Training session", Description = "Attend training session on new software tools", DueDate = DateTime.Now.AddDays(16), Priority = "Low", Status = "Scheduled" },
      new TaskItem { Id = 1018, Name = "Security audit", Description = "Conduct security audit of all systems and applications", DueDate = DateTime.Now.AddDays(17), Priority = "High", Status = "Pending" }
    };

    // Initialize monthly performance data (Jan-Dec) - separate arrays for each series
    completedTasksData = new List<TaskCountData>
    {
      new TaskCountData { Month = "Jan", Count = 25 },
      new TaskCountData { Month = "Feb", Count = 32 },
      new TaskCountData { Month = "Mar", Count = 28 },
      new TaskCountData { Month = "Apr", Count = 35 },
      new TaskCountData { Month = "May", Count = 30 },
      new TaskCountData { Month = "Jun", Count = 38 },
      new TaskCountData { Month = "Jul", Count = 33 },
      new TaskCountData { Month = "Aug", Count = 36 },
      new TaskCountData { Month = "Sep", Count = 31 },
      new TaskCountData { Month = "Oct", Count = 42 },
      new TaskCountData { Month = "Nov", Count = 37 },
      new TaskCountData { Month = "Dec", Count = 29 }
    };

    inProgressTasksData = new List<TaskCountData>
    {
      new TaskCountData { Month = "Jan", Count = 12 },
      new TaskCountData { Month = "Feb", Count = 15 },
      new TaskCountData { Month = "Mar", Count = 18 },
      new TaskCountData { Month = "Apr", Count = 14 },
      new TaskCountData { Month = "May", Count = 16 },
      new TaskCountData { Month = "Jun", Count = 13 },
      new TaskCountData { Month = "Jul", Count = 17 },
      new TaskCountData { Month = "Aug", Count = 11 },
      new TaskCountData { Month = "Sep", Count = 19 },
      new TaskCountData { Month = "Oct", Count = 12 },
      new TaskCountData { Month = "Nov", Count = 15 },
      new TaskCountData { Month = "Dec", Count = 20 }
    };

    overdueTasksData = new List<TaskCountData>
    {
      new TaskCountData { Month = "Jan", Count = 6 },
      new TaskCountData { Month = "Feb", Count = 7 },
      new TaskCountData { Month = "Mar", Count = 8 },
      new TaskCountData { Month = "Apr", Count = 6 },
      new TaskCountData { Month = "May", Count = 9 },
      new TaskCountData { Month = "Jun", Count = 7 },
      new TaskCountData { Month = "Jul", Count = 10 },
      new TaskCountData { Month = "Aug", Count = 6 },
      new TaskCountData { Month = "Sep", Count = 11 },
      new TaskCountData { Month = "Oct", Count = 8 },
      new TaskCountData { Month = "Nov", Count = 9 },
      new TaskCountData { Month = "Dec", Count = 12 }
    };
  }

  private void ShowNotifications()
  {
    NotificationService.Notify(new NotificationMessage 
    { 
      Severity = NotificationSeverity.Info, 
      Summary = "Notifications", 
      Detail = "You have 3 new task notifications." 
    });
  }

  private void ShowHelp()
  {
    NotificationService.Notify(new NotificationMessage 
    { 
      Severity = NotificationSeverity.Info, 
      Summary = "Help", 
      Detail = "Task management help documentation is available." 
    });
  }

  private void OnMenuItemClick(string menuItem)
  {
    NotificationService.Notify(new NotificationMessage 
    { 
      Severity = NotificationSeverity.Info, 
      Summary = "Menu Clicked", 
      Detail = $"Clicked on {menuItem} menu item. Navigation disabled for demo purposes." 
    });
  }

  private string GetPriorityText(string priority)
  {
    return priority switch
    {
      "High" => "High",
      "Medium" => "Medium",
      "Low" => "Low",
      _ => priority
    };
  }

  private Shade GetPriorityStyle(string priority)
  {
    return priority switch
    {
      "High" => Shade.Darker,
      "Medium" => Shade.Default,
      "Low" => Shade.Light,
      _ => Shade.Default
    };
  }

  private BadgeStyle GetStatusStyle(string status)
  {
    return status switch
    {
      "In Progress" => BadgeStyle.Warning,
      "Pending" => BadgeStyle.Info,
      "Scheduled" => BadgeStyle.Primary,
      "Completed" => BadgeStyle.Success,
      _ => BadgeStyle.Secondary
    };
  }
}